<script setup>
import {nextTick, ref} from "vue";
import {updateFixtureLedger} from "@/apis/zyj/FixtureLedger.js";
import {ElMessage} from "element-plus";

const props = defineProps({
  updateDialog: Boolean,
  form: Object,
  typeDate: Array
})
const formRef = ref()


// 自定义事件
const emit = defineEmits(['close-dialog'])
// 关闭弹窗
const handleClose = () => {
  emit('close-dialog')
}
// 打开弹窗时清空校验
const handleOpenCardDialog = () => {
  nextTick(() => {
    // 清空校验
    formRef.value.clearValidate()
  })
}
// 表单校验
const rules = {
  typeCode: [{required: true, message: '请选择工装夹具类型', trigger: 'change'}],
  fixtureName: [{required: true, message: '请输入工装夹具名称', trigger: 'blur'}],
  quantity: [{required: true, message: '请输入数量', trigger: 'blur'}]
}
// 数量改变时，可用数量也改变
const eventDisposalRangeChange = () => {
  props.form.availableQuantity = props.form.quantity
}

// 提交表单
const handleSubmit = async () => {
  // 验证forRef是否存在
  if (!formRef.value) return
  try {
    await formRef.value.validate()
    console.log(props.form)
    // 在此处处理表单提交
    updateFixtureLedger(props.form).then(req => {
      console.log(req)
      if (req === '成功') {
        ElMessage.success('修改成功')
        handleClose()
      } else {
        ElMessage.error('修改失败')
      }
    })
  } catch (error) {
    ElMessage.error('请填写完整信息')
  }
}
</script>

<template>
  <el-dialog title="修改工装夹具清单" v-model="props.updateDialog" width="60%" @close="handleClose"
             @open="handleOpenCardDialog">
    <el-form ref="formRef" :model="props.form" :rules="rules" label-width="120px" class="equipment-form">
      <el-row>
        <el-col :span="12">
          <el-form-item label="工装夹具类型" prop="typeCode">
            <el-select v-model="form.typeCode" placeholder="请选择类型" class="w-full">
              <el-option v-for="s in props.typeDate" :label="s.typeName" :value="s.typeCode"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工装夹具名称" prop="fixtureName">
            <el-input v-model="form.fixtureName" placeholder="请输入工装夹具名称"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="品牌" prop="brand">
            <el-input v-model="form.brand" placeholder="请输入品牌"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="型号" prop="model">
            <el-input v-model="form.model" placeholder="请输入型号"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="工装夹具编号" prop="code">
            <div class="flex items-center">
              <el-input v-model="form.fixtureCode" disabled placeholder="请输入工装夹具编号"/>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="4">

        </el-col>
        <el-col :span="12">
          <el-form-item label="数量" prop="quantity">
            <el-input-number
                v-model="form.quantity"
                min="0"
                controls-position="right"
                class="w-full"
                @blur="eventDisposalRangeChange"
                @input.native="eventDisposalRangeChange"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="可用数量" prop="availableQuantity">
            <el-input
                v-model="form.availableQuantity"
                placeholder="请输入可用数量"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="保养维护类型" prop="maintenanceType">
            <el-select v-model="form.maintenanceType" placeholder="请选择维护类型" class="w-full">
              <el-option label="定期维护" value="定期维护"/>
              <el-option label="按使用次数维护" value="按使用次数维护"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item v-if="form.maintenanceType === '定期维护'" label="下一次保养日期" prop="nextMaintenanceDate">
            <el-date-picker
                v-model="form.nextMaintenanceDate"
                type="date"
                placeholder="请选择下一次保养日期"
                class="w-full"
            />
          </el-form-item>
          <el-form-item v-if="form.maintenanceType === '按使用次数维护'" label="下一次保养周期"
                        prop="nextMaintenanceDate">
            <el-input v-model="form.nextMaintenancePeriod" placeholder="请输入保养周期"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio label="1">在库</el-radio>
              <el-radio label="2">被领用</el-radio>
              <el-radio label="3">报废</el-radio>
              <el-radio label="4">维修中</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="备注" prop="notes">
        <el-input
            v-model="form.remark"
            type="textarea"
            rows="4"
            placeholder="请输入内容"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>